<template>
  <div :class="$style.dialogyy">
    <div :class="$style.mask" @click="closeDia"></div>
    <div :class="$style.content">
      <div :class="$style.p1">预约设计你的家</div>
      <div :class="[ $style.field]">
        <input type="text" placeholder="请输入您的称呼" v-model="form.name" maxlength="10">
      </div>
      <div :class="[ $style.field]">
        <input type="text" placeholder="请输入您的手机号" @input="inputNumber" maxlength="11">
      </div>
      <div :class="[$style.field,$style.area]" @click="select">
        <div :class="$style.fieldImg">
          {{form.region}}
          <img src="~/static/images/Group24.png">
        </div>
        <input type="text" style="position: absolute; left: -1000px;" ref="select" @blur="blur">
        <ul v-if="showArea">
          <li
            v-for="(item,i) in items"
            :key="i"
            v-text="item"
            @click.stop="onSelect(item)"
            @touchmove.stop="move"
          ></li>
        </ul>
      </div>
      <button :class="[$style.button1,disabled?$style.disabled : '']" @click="submit">立即预约</button>
    </div>
    <pop-up :isShowpop="isShowpop" :msg="msg"/>
  </div>
</template>


<script>
import PopUp from "./popUp";
export default {
  components: {
    PopUp
  },
  data() {
    return {
      showArea: false,
      items: [
        "江岸区",
        "蔡甸区",
        "东西湖区",
        "汉南区",
        "汉阳区",
        "洪山区",
        "黄陂区",
        "江汉区",
        "江夏区",
        "硚口区",
        "青山区",
        "武昌区",
        "新洲区"
      ],
      isShowpop: false,
      msg: "",
      form: {
        region: "请选择您所在的区域",
        name: "",
        phone: ""
      }
    };
  },
  methods: {
    async getBook() {
      const { data } = await this.$axios.post("reser/insert", {
        name: this.form.name,
        phone: this.form.phone,
        region: this.form.region
      });
      if (data.code == 0) {
        this.showPop("您已成功预约您的专属设计师");
      } else {
        this.showPop("您已预约过了哦！");
      }
    },
    move() {},
    inputNumber(e) {
      let value = e.target.value;
      value = Number(value);

      if (!isNaN(value)) {
        this.form.phone = value;
      } else {
        e.target.value = this.form.phone;
      }
      let number = String(this.form.phone);
      if (number.length == 11) {
        this.showError = false;
      }
    },
    showPop(msg) {
      this.msg = msg;
      this.isShowpop = true;
      let time = setTimeout(() => {
        this.isShowpop = false;
      }, 2000);
    },
    submit() {
      let number = String(this.form.phone);

      if (number.length != 11) {
        this.showPop("请输入正确的手机号");
        return;
      } else {
        this.getBook();
      }
    },
    blur() {
      this.showArea = false;
    },
    select() {
      this.showArea = true;
      this.$refs.select.focus();
    },
    onSelect(value) {
      this.form.region = value;
      this.showArea = false;
    },
    closeDia() {
      this.$emit("closeDia");
    }
  },
  computed: {
    disabled() {
      return !this.form.phone || !this.form.name;
    }
  },
  mounted() {}
};
</script>


<style lang="less" module>
.dialogyy {
  z-index: 20;
  .success {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 166px;
    height: 170px;
    border-radius: 6px;
    z-index: 11;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 11;
  }
  .content {
    position: absolute;
    top: 312px;
    left: 50%;
    width: 526px;
    height: 580px;
    transform: translate(-50%, 0);
    background: #ffffff;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    z-index: 11;
  }
  .p1 {
    color: #000;
    padding: 60px 0 86px;
    font-size: 36px;
    text-align: center;
  }
  .field {
    margin: 0 44px 56px;
    border-bottom: 1px solid #c8c8c8; /*no*/
    padding-bottom: 10px;
    .fieldImg {
      img {
        width: 28px;
        height: 28px;
        float: right;
        right: 0;
      }
    }
    input {
      border: none;
      outline: none;
      width: 100%;
      font-size: 20px;
      padding: 0;
      display: block;
    }
    &.hasError {
      position: relative;
      border-bottom: 1px solid #ee4433;
      .error {
        display: block;
        position: absolute;
        left: 0;
        top: 40px;
      }
    }
  }
  .button1 {
    display: block;
    margin: 0 auto;
    width: 298px;
    line-height: 60px;
    background: #fdc15f;
    border-radius: 6px;
    border: 1px solid #e5e2e2;
    font-size: 28px;
    &.disabled {
      background: #ccc;
      pointer-events: none;
      color: #fff;
    }
  }

  .area {
    position: relative;
    font-size: 20px;
    color: #7f7f7f;
    ul {
      position: absolute;
      top: 50px;
      left: 0;
      list-style: none;
      background: #fff;
      width: 100%;
      padding: 0;
      /*max-height: 300px;*/
      height: 300px;
      overflow: scroll;
      li {
        padding: 20px 24px;
      }
    }
  }
}

.error {
  font-size: 12px;
  color: #ee4433;
  display: none;
}
</style>
